<template>
    <div class="menuLink">
        <el-icon class="menu-icon"><Connection /></el-icon>
        <span class="router-link" @click="clickLink(props.item.PATH, props.item)">{{ props.item.TITLE }}</span>
        <!-- <span class="router-link" @click="clickLink(props.item?.PATH || '', props.item)">{{ props.item?.TITLE || '未知标题' }}</span> -->
    </div>
</template>

<script setup>
import { ref , defineProps } from 'vue'
import { mainStore } from '@/stores/store'
import { useRouter } from 'vue-router'
import {isCollectFunc} from '@/utils/isCollect'

const useStore = mainStore()
const router = useRouter()
let isCollect = ref(false) //用户是否对其有进行收藏

//接收父组件传递的数据
const props = defineProps({
    item: {
        type: Object
        // required: true,
        // default: () => ({ PATH: '', TITLE: '' }) // 提供默认值
    }
})

//点击链接打开页面
const clickLink = (path, item) => {
    isCollect.value = isCollectFunc(path,useStore.userCollect)
    useStore.setUcStatus(isCollect.value) 
    useStore.addSubTabList(item)
    useStore.toggleHomeShow(path)
    router.push(path)
}

</script>

<style lang="less" scoped>
.menuLink{
        height: 2.5rem;
        width: 100%;
        padding-left:.3125rem;
        display: flex;
        align-items: center;
        justify-content:flex-start;  
        background-color: rgba(68, 146, 224,.3);                      
        .menu-icon{
            width: 10%;
            color: #165bf0;
            // margin-right: .3125rem; 
            // padding-right:.3125rem;  ; 
            font-size: .875rem;                      
        }
        .router-link{
            width: 90%;
            font-size: .875rem;
            color: #165bf0;
            text-decoration: none;
            white-space:nowrap;   
        }
    }
    .menuLink:hover{
        background-color:rgba(95, 105, 116, 0.1) ;
        cursor: pointer;
    }  
</style>